<!DOCTYPE html>
<html>
<head>
    <title>Flyde Studio Logo - Green Version</title>
    <style>
        body { 
            margin: 0; 
            padding: 20px; 
            background: #f0f0f0; 
            font-family: Arial, sans-serif; 
        }
        .logo-container { 
            background: white; 
            padding: 20px; 
            margin: 20px 0; 
            border-radius: 8px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
        }
        .dark-bg { 
            background: #1a1a1a; 
        }
        h2 { 
            margin-top: 0; 
            color: #333; 
        }
        .dark-bg h2 { 
            color: white; 
        }
        img { 
            max-width: 100%; 
            height: auto; 
        }
    </style>
</head>
<body>
    <h1>Flyde Studio Logo - Green Version</h1>
    
    <div class="logo-container">
        <h2>Light Background</h2>
        <img src="logo-studio.svg" alt="Flyde Studio Logo" width="500">
    </div>
    
    <div class="logo-container dark-bg">
        <h2>Dark Background</h2>
        <img src="logo-studio.svg" alt="Flyde Studio Logo" width="500">
    </div>
    
    <p><strong>Files created:</strong></p>
    <ul>
        <li><code>logo-studio.svg</code> - Green version of the Flyde logo with "Studio" text</li>
        <li><code>logo-studio-preview.html</code> - This preview file</li>
    </ul>
    
    <p><strong>Usage:</strong> You can right-click on the logo above and save it, or use the SVG file directly in your projects.</p>
</body>
</html>